<template>
	<div class="new_list">
		<h3>最新音乐</h3>
		<div class="new_list_wrapper">
			<div class="new_item" v-for="(item,index) of newList" :key="index">
				<!-- 左侧 -->
				<div class="item_left">
					<h4>{{item.name}}</h4>
					<p>
                        <i class="sq"></i>
                        {{ item.song.artists[0].name }}-{{item.name}}
                    </p>
				</div>
				<!-- 右侧按钮 -->
				<div class="item_right">
					<button @click="toPlay(item.id)"></button>
				</div>
			</div>
		</div>
	</div>
</template>
   
<script>
export default {
	data() {
		return {
			newList: []
		}
	},
	mounted() {
		this.$axios.get('/music/personalized/newsong', {       // 还可以直接把参数拼接在url后边
			params: {
				// title:'眼镜'
			}
		}).then((res) => {
			console.log(res)
			this.newList = res.data.result;
		}).catch((error) => {
			console.log(error);
		});
	},
	methods: {
		toPlay(id){
			console.log(id)
			this.$router.push('/play/'+id);//跳页到播放页面
		}
	},
}
</script>
   
<style scoped>
.new_list {
	background: #fff;
	margin-top: 20px;
}
.new_list h3 {
	font-size: 0.34rem;
	margin-bottom: 20px;
	border-left: 0.04rem solid #d33a31;
	text-indent: 10px;
}
.new_item {
	height: 1.1rem;
	border-bottom: 0.02rem solid #f1f1f1;
	display: flex;
	align-items: center;
	padding-left: 0.2rem;
}
.item_left h4 {
	font-size: 0.34rem;
}
.item_left p {
	font-size: 0.24rem;
	color: #888;
}
.item_left {
	flex: 1;
}
/* 按钮 */
.item_right {
	width: 1.1rem;
	height: 1.1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.item_right button {
	width: 22px;
	height: 22px;
	border: none;
	background-image: url("https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=");
	background-position: -24px 0;
	background-size: 166px 97px;
	border-radius: 50%;
}
.sq {
	display:inline-block;
	width: 12px;
	height: 8px;
	margin-right: 4px;
	background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
		no-repeat;
	background-size: 166px 97px;
}
</style>